<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- bootstrap css -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 <!-- main css -->
 <link rel="stylesheet" href="../assets/css/Budget.css">
 <!-- google fonts -->
 <script src="https://use.fontawesome.com/7ade57373d.js"></script>
 <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

 <!-- font awesome -->
 <title>Budget app</title>
 <style>
 </style>
</head>

<body>
 <div class="container-fluid">
  <div class="row">
   <div class="col-11 mx-auto pt-3">
    <!-- title -->
    <h3 class="text-uppercase mb-4">budget app</h3>
    <div class="row">
     <div class="col-md-5 my-3">
      <!-- budget feedback -->
      <div class="budget-feedback alert alert-danger text-capitalize">budget feedback</div>
      <!-- budget form -->
      <form id="budget-form" class=" budget-form">
       <h5 class="text-capitalize">please enter your budget</h5>
       <div class="form-group">
        <input type="number" class="form-control budget-input" id="budget-input">
       </div>
       <!-- submit button -->
       <button type="submit" class="btn text-capitalize budget-submit" id="budget-submit">calculate</button>
      </form>
     </div>
     <div class="col-md-7">
      <!-- app info -->
      <div class="row my-3">
       <div class="col-4 text-center mb-2">
        <h6 class="text-uppercase info-title">budget</h6>
        <span class="budget-icon"><i class="fa fa-money" aria-hidden="true"></i></span>
        <h4 class="text-uppercase mt-2 budget" id="budget"><span>$ </span><span id="budget-amount">0</span></h4>
       </div>
       <div class="col-4 text-center">
        <h6 class="text-uppercase info-title">expenses</h6>
        <span class="expense-icon"><i class="fa fa-credit-card" aria-hidden="true"></i></span>
        <h4 class="text-uppercase mt-2 expense" id="expense"><span>$ </span><span id="expense-amount">0</span></h4>
       </div>
       <div class="col-4 text-center">
        <h6 class="text-uppercase info-title">balance</h6>
        <span class="balance-icon"><i class="fa fa-usd" aria-hidden="true"></i></span>
        <h4 class="text-uppercase mt-2 balance" id="balance"> <span>$ </span><span id="balance-amount">0</span></h4>
       </div>
      </div>
     </div>
    </div>

    <div class="row">
     <div class="col-md-5 my-3">
      <!-- expense feedback -->
      <div class="expense-feedback alert alert-danger text-capitalize">expense feedback</div>
      <!-- expense form -->
      <form id="expense-form" class=" expense-form">
       <h5 class="text-capitalize">please enter your expense</h5>
       <div class="form-group">
        <input type="text" class="form-control expense-input" id="expense-input">
       </div>
       <h5 class="text-capitalize">please enter expense amount</h5>
       <div class="form-group">
        <input type="number" class="form-control expense-input" id="amount-input">
       </div>
       <!-- submit button -->
       <button type="submit" class="btn text-capitalize expense-submit" id="expense-submit">add expense</button>
      </form>
     </div>
     <div class="col-md-7 my-3">
      <!-- expense list -->
      <div class="expense-list" id="expense-list">

       <div class="expense-list__info d-flex justify-content-between text-capitalize">
        <h5 class="list-item">expense title</h5>
        <h5 class="list-item">expense value</h5>
        <h5 class="list-item"></h5>
       </div>
       <!-- single expense -->

       <!-- <div class="expense">
        <div class="expense-item d-flex justify-content-between align-items-baseline">

         <h6 class="expense-title mb-0 text-uppercase list-item">- title</h6>
         <h5 class="expense-amount mb-0 list-item">amount</h5>

         <div class="expense-icons list-item">

          <a href="#" class="edit-icon mx-2" data-id="${expense.id}">
           <i class="fas fa-edit"></i>
          </a>
          <a href="#" class="delete-icon" data-id="${expense.id}">
           <i class="fas fa-trash"></i>
          </a>
         </div>
        </div>

       </div> -->

       <!-- end of single expense -->

      </div>
     </div>
    </div>




   </div>
  </div>
 </div>




 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 <!-- script js -->
 <script src="../assets/js/Budget.js"></script>
</body>

</html>